<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>ajaxJs</title>
        <script src="../style/js/jquery.js"></script>
        <script src="../style/js/bt.dwz.js"></script>
    </head>
<script>
    function a(str) {
        alert("接收:" + str);
    }
    function a1(str) {
        alert("分页接收:" + str)
    }
    function b(str) {
        alert("发送" + str);
    }
</script>
<body>
    <div class="span12">
        <form id="myForm3"  class="form-inline bs-docs-example" actionTo="#table1" beforeSubmit="b(resque)" dataType="script" callback="a(data);" action="www.demo.com/upload/test.js" >
        <!--actionTo:数据更新的table元素；beforeSubmit:提交前的自定义函数；dataType:传值类型；callback:数据操作成功后的自定义函数(data参数为返回的json值),由于接收参数，必须以函数名形式执行(比如:a(data))；action:接收地址；method:提交方式-->
            <input page="#page1" class="hide" name="listrow" value="20"></input>
            <!--page:分页元素-->
            <input type="text" name="name" placeholder="姓名 " value="">
            <input type="text" name="age" placeholder="年龄 ">
            <label>
                性别:
            </label>
            <select name="sex">
                <option value="1">男</option>
                <option value="2">女</option>
                <option value="0">性别不明</option>
            </select>
            <input type="text" name="job" placeholder="职业 ">
			<button type="submit"  class="btn">查询</button>
        </form>
        <div class="widget-box">
		    <div class="widget-title">
			    <h5>人员表</h5>
		    </div>
		    <div class="widget-content nopadding">
			    <div role="grid" class="dataTables_wrapper" ><div class=""></div>
                    <table class="table table-bordered data-table dataTable" id="table1">
					    <thead>
						    <tr role="row">
                                <th act="name">姓名</th>
                                <th act="age">年龄</th>
                                <th act="sex">性别</th>
                                <th act="job">职业</th>
                            </tr>
					    </thead>
									
				        <tbody>
                            <tr class="gradeA odd">
						        <td class="  sorting_1">Gecko</td>
						        <td class=" ">Firefox 1.0</td>
						        <td class=" ">Win 98+ / OSX.2+</td>
						        <td class="center ">1.7</td>
					        </tr><tr class="gradeA even">
						        <td class="  sorting_1">Gecko</td>
						        <td class=" ">Firefox 1.5</td>
						        <td class=" ">Win 98+ / OSX.2+</td>
						        <td class="center ">1.8</td>
					        </tr><tr class="gradeA odd">
						        <td class="  sorting_1">Gecko</td>
						        <td class=" ">Firefox 2.0</td>
						        <td class=" ">Win 98+ / OSX.2+</td>
						        <td class="center ">1.8</td>
					        </tr><tr class="gradeA even">
						        <td class="  sorting_1">Gecko</td>
						        <td class=" ">Firefox 3.0</td>
						        <td class=" ">Win 2k+ / OSX.3+</td>
						        <td class="center ">1.9</td>
					        </tr>
                        </tbody>
                    </table>
                    <div id="page1" form="#myForm3" class="fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix" action="test1.js" beforeSubmit="b(resque)" dataType="script" callback="a1(respon);">
                    <!--
                        class="fg-toolbar"为不可变标记；form：此处必须有form,否则则没有分页效果，如果该form有input值,则为过滤查询，如果填写false，则无查询栏查询；action:点击a元素后,action值?page=a元素href值 (例如:a.html?page=1);其他属性参考form元素
                    -->
                        <div class="dataTables_filter">
                        <!--class="dataTables_filter"为不可变标记-->
                            <label>
                                分页: 
                                <select name="page">
                                    <option value="20">20</option>
                                    <option value="50" selected="">50</option>
                                    <option value="100">100</option>
                                </select>
                            </label>
                        </div>
                        <div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers" >
                        <!--class="dataTables_paginate"为不可变标记 -->
                            <a class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled">第一页</a>
                            <a class="previous fg-button ui-button ui-state-default ui-state-disabled">上一页</a>
                            <span>
                                <a class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
                                <a class="fg-button ui-button ui-state-default" href="2">2</a>
                                <a class="fg-button ui-button ui-state-default" href="3">3</a>
                                <a class="fg-button ui-button ui-state-default" href="4">4</a>
                                <a class="fg-button ui-button ui-state-default" href="5">5</a>
                            </span>
                            <a class="next fg-button ui-button ui-state-default" href="2">下一页</a>
                            <a class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default" href="6">最后一页</a>
                        </div>
                    </div></div>  
		    </div>
	</div>
    </div>
</body>
    
</html>
